/* 机构管理 */
import { treeApi, treeItemApi, city1, city2, editApi } from '@/api/organizationManage'
import { typeTree, twoChhildren, formval, type, city } from '@/types/typeData'
import { FolderOpened, Folder } from '@element-plus/icons-vue'
import { treeItem, itemCity } from '@/types/data'
import { reactive, ref, watch } from 'vue';
export default function organizationManageFn() {
  // 编辑用到id
  let idEdit = ref<string>('')
  // 全局加载
  let loading = ref<boolean>(true)
  // 禁用表单
  let disabled = ref<boolean>(true)
  // 编辑完成按钮
  let text = ref<string>('编辑')
  // 机构类型列表
  let typeList = reactive<type>([
    {
      type: 1,
      name: '一级转运中心'
    },
    {
      type: 2,
      name: '二级转运中心'
    },
    {
      type: 3,
      name: '营业部'
    }
  ])
  // 定义 树形 数据
  const defaultProps = {
    children: 'children',
    label: 'name',
  }
  // 获取左侧树形
  let treeData = ref<typeTree>()
  const getTree = async (): Promise<void> => {
    const res = await treeApi()
    loading.value = false
    treeData.value = JSON.parse(res.data.data as any)
    console.log(treeData.value);
  }
  // 机构数据
  let item = reactive<formval>({
    id: '',
    name: '',
    latitude: null,
    longitude: null,
    managerName: '',
    phone: '',
    address: '',
    city1: '',
    city3: '',
    city2: '',
    type: null
  })
  // 城市 1, 2,3列表
  let city1List = ref<city | itemCity>()
  let city2List = ref<city | itemCity>()
  let city3List = ref<city | itemCity>()
  // 点击树形回显机构数据
  const handleNodeClick = (data: twoChhildren): void => {
    idEdit.value = data.id
    getData(data.id)
  }
  // 复用
  const getData = async (id1: string): Promise<void> => {
    // 获取机构数据
    const res = await treeItemApi(id1)
    const { province, address, city, county, id, latitude, longitude, managerName, name, phone, type } = res.data.data
    // item.value = res.data.data
    item.id = id
    item.latitude = latitude
    item.longitude = longitude
    item.name = name
    item.address = address
    item.managerName = managerName
    item.phone = item.phone
    item.type = type
    item.city1 = province.id
    item.city2 = city.id
    item.city3 = county.id
    item.phone = phone
    // 获取三个城市的列表
    const city1Data = await city1()
    city1List.value = city1Data.data.data
    const city2Data = await city2(item.city1)
    city2List.value = city2Data.data.data
    const city3Data = await city2(item.city2)
    city3List.value = city3Data.data.data
    bol.value = false // 解决渲染时候 被监听到修改  误以为修改了表单
  }
  const getNode = (node: any): void => {
    console.log(node) // node.data
  }
  // 更改省份 市 时候操作
  const dianCity1 = async (): Promise<void> => { // 省
    const city2Data = await city2(item.city1)
    item.city2 = ''
    item.city3 = ''
    city2List.value = city2Data.data.data
  }
  const dianCity2 = async (): Promise<void> => { // 市
    const city3Data = await city2(item.city2)
    item.city3 = ''
    city3List.value = city3Data.data.data
  }
  let bol = ref<boolean>(false)
  // 监听是否修改
  watch(item as any, (): void => {
    bol.value = true
  }, { deep: true })
  // 编辑表单
  const qiehuan = async (): Promise<void> => {
    if (disabled.value) {
      disabled.value = false
      text.value = '完成'
    } else {
      if (bol.value) {
        const res = await editApi({
          ...item
        })
        console.log(res);
        getData(idEdit.value)
      }
      bol.value = false
      disabled.value = true
      text.value = '编辑'
    }
  }


  return { loading, text, qiehuan, disabled, dianCity1, dianCity2, city3List, city2List, city1List, typeList, item, FolderOpened, Folder, getTree, treeData, defaultProps, getNode, handleNodeClick }
}